<template>
  <div>
    <van-search shape="round" placeholder="请输入搜索关键词" />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-swipe
        class="my-swipe swipe"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
          <img v-img="item.img" />
        </van-swipe-item>
      </van-swipe>
      <van-grid :column-num="5" :border="false">
        <van-grid-item
          v-for="item in menuLits"
          :key="item.id"
          :icon="item.icon"
          :text="item.title"
        />
      </van-grid>
      <van-list
        class="goods-list"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getGoodeListData()"
      >
        <router-link
          class="goods-item"
          v-for="item in goodslist"
          :key="item.proid"
          :to="`/detail/` + item.proid"
        >
          <!-- <img :src="item.img1" alt="" /> -->
          <img v-img="item.img1" />
          <div class="title">{{ item.proname }}</div>
          <div class="desc">{{ item.desc }}</div>
          <div class="price">￥{{ item.originprice | fromprice }}</div>
        </router-link>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getBannerlist, gteMenulist, getGoodsList } from '@/api/home'
export default {
  name: 'Home',
  data () {
    return {
      bannerList: [],
      menuLits: [],
      goodslist: [],
      count: 0,
      loading: false,
      finished: false,
      refreshing: false
    }
  },
  created () {
    this.getBannerlistData()
    this.getMenulistData()
    // this.getGoodeListData()
  },
  methods: {
    async getBannerlistData () {
      const res = await getBannerlist()
      this.bannerList = res.data
    },
    async getMenulistData () {
      const res = await gteMenulist()
      this.menuLits = res.data
    },
    async getGoodeListData () {
      this.count++
      const res = await getGoodsList({
        count: this.count,
        limitNum: 10
      })
      this.goodslist = [...this.goodslist, ...res.data]
      this.loading = false
      this.refreshing = false
      if (res.data.length === 0) {
        this.finished = true
      }
    },
    onRefresh () {
      this.finished = false
      this.loading = true
      this.goodslist = []
      this.count = 0
      this.getGoodeListData()
    },
    todetail (proid) {
      console.log(proid)
    }
  },
  filters: {
    fromprice (value) {
      return value.toFixed(2)
    }
  }
}
</script>
<style lang="scss" scoped>
.home-container {
  padding-bottom: 50px;
}
.swipe {
  width: 100%;
  height: 250px;
}

.swipe img {
  width: 100%;
  height: 100%;
}

.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  box-sizing: border-box;
  width: 100%;
  padding-bottom: 50px;
  background-color: #f3f3f3;
  .goods-item {
    box-sizing: border-box;
    background-color: #fff;
    padding: 5.33333vw;
    border-radius: 1.33333vw;
    display: flex;
    align-items: center;
    width: 48%;
    flex-direction: column;
    margin-top: 1.33333vw;
    img {
      width: 26.66667vw;
      height: 32vw;
    }
    .title {
      font-size: 3.73333vw;
      display: inline-block;
      white-space: nowrap;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 4vw;
      color: #000;
    }
    .desc {
      font-size: 3.2vw;
      color: #c3c3c3;
      display: inline-block;
      white-space: nowrap;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 2.66667vw;
    }
    .price {
      font-size: 3.2vw;
      margin-top: 2.66667vw;
      color: var(--ThemeColors);
    }
  }
}
::v-deep(.van-list .van-list__loading) {
  width: 100%;
}
::v-deep(.van-list__finished-text) {
  width: 100%;
  text-align: center;
}
::v-deep(.van-search) {
  background-color: var(--ThemeColors);
}
</style>
